<template>
  <div id="login">
    <Form ref="login_data" :rules="loginRuleValidate" :label-width="60" :model="login_data">
      <FormItem label="手机" prop="tel">
        <Input type="text" placeholder="输入您的手机号码" v-model="login_data.tel">
        <Icon type="ios-phone-portrait" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem label="密码" prop="passwd">
        <Input type="password" placeholder="输入您的登录密码" v-model="login_data.passwd">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Button class="login_btn" icon="md-arrow-round-forward" shape="circle" size="large" v-on:click="loginSubmit('login_data')"></Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        // 登录表单数据
        login_data: {
          tel: '',
          passwd: ''
        },
        // 登录表单数据
        loginRuleValidate: {
          tel: [{
            required: true,
            message: '手机号码不能为空',
            trigger: 'blur'
          }],
          passwd: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }],
        },
      }
    },
    methods: {
      loginSubmit(data) {
        this.$refs[data].validate((valid) => {
          if (valid) {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(this.login_data.tel)) {
              this.$Message.error('手机号码有误无法登录！');
            } else {
              this.$axios({
                method: 'post',
                url: 'tp5_jzt-blog_server/public/index.php/home/login',
                // headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                data: {
                  login_data: this.login_data
                },
              }).then((res) => {
                console.log(res.data);
                if (res.data) {
                  sessionStorage.setItem("userdata", JSON.stringify(res.data));
                  this.$Message.success('登录成功!');
                  this.$router.push({
                    path: '/'
                  })
                } else {
                  this.$Message.error('登录失败！');
                }
              }).catch((error) => {
                console.log(error)
              })
            }
          } else {
            this.$Message.error('输入有误无法登录！');
          }
        })
      },
    },
  }
</script>

<style scoped>
  .login_title {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    text-align: center;
    font-size: 30px;
    line-height: 200px;
  }

  .login_box {
    margin: 10% 5px 0 5px;
  }

  .login_btn {
    display: block;
    float: right;
  }
</style>
